<template>
  <el-table ref="filterTable" :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" sortable width="120" column-key="date"></el-table-column>
    <el-table-column prop="language" label="名称" width="150"></el-table-column>
    <el-table-column prop="name" label="开发者" width="180"></el-table-column>
    <el-table-column prop="description" label="描述" :formatter="formatter"></el-table-column>
    <el-table-column
      prop="tag"
      label="标签"
      width="100"
      :filters="languageType"
      :filter-method="filterTag"
      filter-placement="bottom-end"
    >
      <template slot-scope="scope">
        <el-tag :type="filterShowTag(scope.row.tag)" disable-transitions>{{scope.row.tag}}</el-tag>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "1991",
          language: "Python",
          name: "Guido van Rossum",
          description:
            "Python 是一个高层次的结合了解释性、编译性、互动性和面向对象的脚本语言",
          tag: "服务端"
        },
        {
          date: "1979",
          language: "MySql",
          name: "MySQL AB",
          description:
            "MySQL 是最流行的关系型数据库管理系统，在WEB应用方面MySQL是最好的RDBMS应用软件之一",
          tag: "数据库"
        },
        {
          date: "1995",
          language: "JavaScript",
          name: "Brendan Eich",
          description:
            "JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的高级编程语言",
          tag: "JavaScript"
        },
        {
          date: "2014",
          language: "Vue",
          name: "尤雨溪",
          description: "Vue 是一套用于构建用户界面的渐进式JavaScript框架",
          tag: "JavaScript"
        },
        {
          date: "2001",
          language: "CSS3",
          name: "万维网联盟",
          description: "升级版层叠样式表",
          tag: "HTML/CSS"
        },
        {
          date: "1995",
          language: "Java",
          name: "Sun Microsystems",
          description: "Java是一门面向对象编程语言",
          tag: "服务端"
        },
        {
          date: "2020",
          language: "L-Frame",
          name: "LYC",
          description: "哈哈哈",
          tag: "HTML/CSS"
        }
      ],
      languageType: [
        { text: "服务端", value: "服务端" },
        { text: "数据库", value: "数据库" },
        { text: "JavaScript", value: "JavaScript" },
        { text: "HTML/CSS", value: "HTML/CSS" }
      ]
    };
  },
  methods: {
    resetDateFilter() {
      this.$refs.filterTable.clearFilter("date");
    },
    clearFilter() {
      this.$refs.filterTable.clearFilter();
    },
    formatter(row, column) {
      return row.description;
    },
    filterTag(value, row) {
      return row.tag === value;
    },
    filterHandler(value, row, column) {
      const property = column["property"];
      return row[property] === value;
    },
    filterShowTag(key) {
      let result = null;
      switch (key) {
        case "服务端":
          result = "primary";
          break;
        case "数据库":
          result = "success";
          break;
        case "JavaScript":
          result = "warning";
          break;
        case "HTML/CSS":
          result = "danger";
          break;
      }
      return result;
    }
  }
};
</script>
<style scoped>
</style>